<template>
  <div class="bj-upload-video">
    <a-upload
      class="bj-upload-button"
      :file-list="fileList"
      accept="video/*"
      :beforeUpload="
        (file) => {
          return beforeUpload(file);
        }
      "
    >
      <a-button
        icon="video-camera"
        v-if="!viewMode"
        :disabled="value.length >= count"
      >
        点击上传
      </a-button>
    </a-upload>
    <div class="choosed-videos-warp" v-if="value.length > 0">
      <div
        class="video-list"
        v-for="(item, index) in value"
        :key="index"
        @mouseenter="mouseEnter(index)"
      >
        <div class="player-video">
          <video
            :src="item[replaceFields.videoSrc]"
            :id="'video_' + index"
            @dblclick="handleDoubleClick(index)"
          />
          <template v-if="!item.fail && !item.loading && !viewMode">
            <!-- 暂停 -->
            <div
              class="play-btn pause"
              @click="playVideo(0, index)"
              v-if="item.videoStatus == 1"
            >
              <a-icon type="pause" />
            </div>
            <!-- 播放 -->
            <div class="play-btn" @click="playVideo(1, index)" v-else>
              <a-icon type="caret-right" />
            </div>
          </template>
          <!-- 删除 -->
          <div
            class="remove-btn"
            v-if="!item.loading && !viewMode"
            @click="deleteVideo(item, index)"
          >
            <a-icon type="close" />
          </div>
          <!-- 上传loading -->
          <div class="up-loading" v-if="item.loading && !viewMode">
            <a-icon
              type="loading"
              :style="{ fontSize: '30px', color: '#333' }"
            />
          </div>
          <!-- 上传失败图标 -->
          <div
            class="up-loading up-error"
            v-if="item.fail && !item.loading && !viewMode"
          >
            <a-icon
              type="info-circle"
              :style="{ fontSize: '30px', color: '#ff6565' }"
            />
            <div>上传失败</div>
          </div>
        </div>
        <!-- 文件名称 -->
        <div
          class="player-name"
          v-if="showVideoName"
          :title="item[replaceFields.fileName]"
        >
          {{ item[replaceFields.fileName] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      },
    },
    viewMode: {
      type: Boolean,
      default: false,
    },
    //最大上传数量
    count: {
      type: Number,
      default: 0,
    },
    //
    showVideoName: {
      type: Boolean,
      default: false,
    },
    //
    replaceFields: {
      type: Object,
      default: () => {
        return {
          fileName: "name",
          videoSrc: "url",
        };
      },
    },
  },
  data() {
    return {
      fileList: [],
      videoStatus: 0,
    };
  },
  computed: {},
  mounted() {},
  methods: {
    //删除视频
    deleteVideo(file, index) {
      let { value } = this;
      let data = value.filter((v, i) => i != index);
      this.$emit("input", data);
      this.$emit("remove", { file, index });
    },

    //监听文件选择
    beforeUpload(file) {
      let { name = "" } = file;
      let { value, replaceFields } = this;
      let itemFileData = {
        file,
        [replaceFields.fileName]: name,
        videoStatus: 0,
      };
      this.parseVideo(file).then((res) => {
        itemFileData[replaceFields.videoSrc] = res;
        this.$emit("input", [...value, itemFileData]);
        setTimeout((_) => {
          this.$emit("change", {
            ...itemFileData,
            index: this.value.length - 1,
          });
        });
      });
      return Promise.reject();
    },
    //解析视频流
    parseVideo(file) {
      return new Promise((resolve, reject) => {
        let filereader = new FileReader();
        filereader.onload = (e) => {
          let src = e.target.result;
          resolve(src);
        };
        filereader.readAsDataURL(file);
      });
    },
    //视频播放
    playVideo(type = 0, index) {
      this.value[index].videoStatus = type;
      let videoDocument = document.getElementById("video_" + index);
      if (type == 1) {
        //播放
        videoDocument.play();
      } else {
        //暂停
        videoDocument.pause();
      }
    },
    //双击全屏
    handleDoubleClick(index) {
      let videoDocument = document.getElementById("video_" + index);
      if (videoDocument.requestFullscreen) {
        videoDocument.requestFullscreen();
      } else if (videoDocument.mozRequestFullScreen) {
        videoDocument.mozRequestFullScreen();
      } else if (videoDocument.webkitRequestFullscreen) {
        videoDocument.webkitRequestFullscreen();
      }
    },
    // 在这里添加鼠标移入时的逻辑
    mouseEnter(index) {
      let videoDocument = document.getElementById("video_" + index);
      if (videoDocument.paused) {
        this.value[index].videoStatus = 0;
      } else {
        this.value[index].videoStatus = 1;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bj-upload-video {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .choosed-videos-warp {
    display: flex;
    flex-wrap: wrap;
    .video-list {
      width: 150px;
      margin: 0 20px 20px 0;
      display: flex;
      flex-direction: column;
      .player-video {
        position: relative;
        width: 100%;
        height: 110px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 6px 6px 6px 6px;
        video {
          width: 100%;
          height: 100%;
          border-radius: 6px 6px 6px 6px;
          background: #333;
          object-fit: contain;
        }
        .play-btn {
          z-index: 999;
          cursor: pointer;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 24px;
          height: 24px;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 50%;
          border: 1px solid #ffffff;
          /deep/.anticon {
            color: #ffffff;
            font-size: 16px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          display: none;
        }
        &:hover {
          .play-btn {
            display: block;
          }
        }
        .remove-btn {
          cursor: pointer;
          z-index: 999;
          position: absolute;
          right: 0;
          top: 0;
          width: 24px;
          height: 20px;
          background: rgba(255, 45, 45, 0.7);
          border-radius: 0px 6px 0px 20px;
          /deep/.anticon {
            color: #ffffff;
            font-size: 12px;
            position: absolute;
            top: 3px;
            right: 3px;
          }
        }
        .up-loading {
          position: absolute;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: rgba(255, 255, 255, 0.5);
          &.up-error {
            background: rgba(0, 0, 0, 0.3);
            flex-direction: column;
            color: #ff6565;
            font-weight: bold;
          }
        }
      }
      .player-name {
        margin-top: 10px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        // 设置两行文字溢出
        -webkit-line-clamp: 2;
        /** 对象作为伸缩盒子模型显示 **/
        display: -webkit-box;
        /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-box-orient: vertical;
        /** 隐藏超出的内容 **/
        overflow: hidden;
      }
    }
  }
}
</style>
